﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>编辑栏目类别</title>
    <link rel="stylesheet" href="~/lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="~/css/default/style.css">
    <!--quill editer-->
    <link rel="stylesheet" href="~/lib/quill/quill.core.css" />
    <link rel="stylesheet" href="~/lib/quill/quill.snow.css" />
    <link rel="stylesheet" href="~/lib/quill/quill.bubble.css" />
    <link rel="stylesheet" href="~/lib/quill/quill-zh-cn.css" />
</head>

<body class="mainbody">
    <div id="app" v-cloak>
        <div class="location">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>
                    <i class="el-icon-s-home"></i>
                    管理中心
                </el-breadcrumb-item>
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>内容管理</el-breadcrumb-item>
                <el-breadcrumb-item>编辑类别</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="content-box">
            <el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane label="基本信息" name="info">
                        <div class="tab-content">
                            <el-form-item label="所属父类别">
                                <dt-dropdown-select v-model="model.parentId" :disabled="model.id" :data="treeCategoryList" placeholder="请选择父类"></dt-dropdown-select>
                            </el-form-item>
                            <el-form-item prop="title" label="类别名称">
                                <el-input v-model="model.title" placeholder=""></el-input>
                            </el-form-item>
                            <el-form-item prop="callIndex" label="调用别名">
                                <el-input v-model="model.callIndex" placeholder="任意字符，128个字符内"></el-input>
                            </el-form-item>
                            <el-form-item prop="sortId" label="排序数字">
                                <el-input v-model="model.sortId" placeholder="数字越小越排前"></el-input>
                            </el-form-item>
                            <el-form-item prop="seoTitle" label="SEO标题">
                                <el-input type="text" v-model="model.seoTitle"></el-input>
                            </el-form-item>
                            <el-form-item prop="seoKeyword" label="SEO关健字">
                                <el-input type="text" v-model="model.seoKeyword"></el-input>
                            </el-form-item>
                            <el-form-item prop="seoDescription" label="SEO描述">
                                <el-input type="textarea" v-model="model.seoDescription"></el-input>
                            </el-form-item>
                            <el-form-item label="是否启用">
                                <el-switch :active-value="0" :inactive-value="1" v-model="model.status"></el-switch>
                            </el-form-item>

                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="扩展信息" name="filed">
                        <div class="tab-content">
                            <el-form-item prop="linkUrl" label="外部链接">
                                <el-input type="text" v-model="model.linkUrl"></el-input>
                            </el-form-item>
                            <el-form-item label="显示图片">
                                <dt-upload-text v-model="model.imgUrl"
                                                placeholder="请上传封面图片"
                                                width="20%"
                                                height="10%"
                                                fit="cover"
                                                :size="sysconfig.imgSize"
                                                exts="jpg,jpeg,png,gif"
                                                action="/upload">
                                </dt-upload-text>
                            </el-form-item>
                            <el-form-item prop="content" label="内容介绍">
                                <dt-editor v-model="model.content" placeholder="请输入内容介绍"></dt-editor>
                            </el-form-item>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </div>

        <div class="footer-box">
            <div class="footer-btn">
                <el-button type="primary" @@click="submitForm">确认保存</el-button>
                <el-button plain @@click="resetForm">取消返回</el-button>
            </div>
        </div>
    </div>

    <script src="~/lib/vue/vue.js"></script>
    <script src="~/lib/element-ui/index.js"></script>
    <script src="~/lib/axios/axios.min.js"></script>
    <script src="~/lib/babel-polyfill/polyfill.min.js"></script>
    <script src="~/js/axios.config.js"></script>
    <script src="~/js/upload.component.js"></script>
    <script src="~/js/tree.component.js"></script>
    <!--quill editer-->
    <script src="~/lib/quill/quill.min.js"></script>
    <script src="~/lib/quill/vue-quill-editor.js"></script>
    <script src="~/lib/quill/image-resize.min.js"></script>
    <script src="~/js/editor.component.js"></script>
    <script>
        //初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                activeName: 'info',//当前选项卡
                labelPosition: 'right',//表单对齐方式
                dialogFieldIndex: -1,//正在编辑的索引号
                dialogFieldVisible: false,//编辑对话框
                treeCategoryList: [],//栏目列表
                model: {
                    id: 0,
                    parentId: 0,
                    callIndex: '',
                    classLayer: 1,
                    title: '',
                    imgUrl: '',
                    linkUrl: '',
                    content: '',
                    sortId: 99,
                    seoTitle: '',
                    seoKeyword: '',
                    seoDescription: '',
                    status: 0,
                    channelId: 0,
                },
                sysconfig: {},
                rules: {
                    callIndex: [
                        { max: 128, message: '调用别名不可超出128字符', trigger: 'blur' },
                        { pattern: /^[a-zA-Z_]{1,}$/, message: '只能字母和下划线', trigger: 'blur' }
                    ],
                    title: [
                        { required: true, message: '标题不可为空', trigger: 'blur' },
                        { max: 128, message: '标题不可超出128字符', trigger: 'blur' },
                        { min: 1, message: '标题不可小于1字符', trigger: 'blur' }
                    ],
                    parentId: [
                        { max: 512, message: '图片地址不可超出512字符', trigger: 'blur' }
                    ],
                    imgUrl: [
                        { max: 512, message: '图片地址不可超出512字符', trigger: 'blur' }
                    ],
                    linkUrl: [
                        { max: 512, message: '外部链接不可超出512字符', trigger: 'blur' }
                    ],
                    seoTitle: [
                        { max: 512, message: 'SEO标题不可超出512字符', trigger: 'blur' }
                    ],
                    seoKeyword: [
                        { max: 512, message: 'SEO关健字不可超出512字符', trigger: 'blur' }
                    ],
                    seoDescription: [
                        { max: 512, message: 'SEO描述不可超出512字符', trigger: 'blur' }
                    ]
                },
            },
            methods: {
                //初始化数据
                initData: function () {
                    let _this = this; //当前页面
                    let id = GetQueryValue("id"); //获取ID
                    let parentId = GetQueryValue("parentId"); //获取父ID
                    _this.model.channelId = GetQueryValue("channelId"); //获取channelId
                    const loading = _this.$loading({ body: true, lock: true });
                    //获取系统信息
                    new Promise(resolve => {
                        AxiosAjax({
                            url: `/setting/sysconfig`,
                            loading: false,
                            success: function (res) {
                                _this.sysconfig = res.data;
                                resolve('ok');
                            }
                        });
                    }).then(val => {
                        return new Promise(resolve => {
                            //获取列表
                            let sendUrl = `/article/category/${_this.model.channelId}`;
                            //加载父级列表
                            AxiosAjax({
                                url: sendUrl,
                                loading: true,
                                success: function (res) {
                                    console.log(res);
                                    //let data = [{ id: 0, parentId: -1, title: '无父级', children: res.data }];
                                    //_this.treeCategoryList = data;
                                    _this.treeCategoryList = res.data;
                                    //_this.setDisabledNode(_this.treeCategoryList, id);
                                    resolve('ok');
                                }
                            });
                        })
                    }).then(val => {
                        //获取编辑实体
                        return new Promise(resolve => {
                            if (id) {
                                AxiosAjax({
                                    url: `/article/category/${_this.model.channelId}/${id}`,
                                    loading: true,
                                    success: function (res) {
                                        //赋值给model
                                        Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
                                        resolve('ok');
                                    }
                                });
                            } else if (parentId) {
                                _this.model.parentId = parseInt(parentId);
                                resolve('ok');
                            } else {
                                resolve('ok');
                            }
                        })
                    }).then(val => {
                        loading.close();
                    })
                },
                //设置被禁用的选项
                //setDisabledNode(datas, id) {
                //    var _this = this;
                //    if (id) {
                //        for (var i in datas) {
                //            if (datas[i].id == id) {
                //                datas[i].disabled = true;
                //            }
                //            if (datas[i].children) {
                //                this.setDisabledNode(datas[i].children, id);
                //            }
                //        }
                //    }
                //},
                //表单提交
                submitForm: function () {
                    let _this = this; //当前页面
                    console.log(_this.model);
                    //多个表单验证
                    const f1 = new Promise((resolve, reject) => {
                        _this.$refs['editForm'].validate((valid) => {
                            if (valid) resolve()
                        });
                    });
                    Promise.all([f1]).then(() => {
                        //如果是数组则取最后一个值
                        if (Array.isArray(_this.model.parentId)) {
                            _this.model.parentId = _this.model.parentId[_this.model.parentId.length - 1];
                        }
                        //提交表单,Id大于0则修改，否则添加
                        if (_this.model.id > 0) {
                            AxiosAjax({
                                method: 'put',
                                url: `/article/category/${_this.model.channelId}/${_this.model.id}`,
                                data: _this.model,
                                loading: true,
                                successMsg: '修改栏目类别已成功',
                                success: function (res) {
                                    //可以做跳转到列表页
                                    //重新加载菜单
                                    //if (parent.vm) parent.vm.initData();
                                    _this.linkUrl(`/article/categoryList`);
                                }
                            });
                        } else {
                            AxiosAjax({
                                method: 'post',
                                url: `/article/category/${_this.model.channelId}`,
                                data: _this.model,
                                loading: true,
                                successMsg: '新增栏目类别已成功',
                                success: function (res) {
                                    //重置表单
                                    _this.$refs['editForm'].resetFields();
                                    //_this.linkUrl('/article/categoryList');
                                    //重新加载菜单
                                    //if (parent.vm) parent.vm.initData();
                                }
                            });
                        }
                    })
                },
                //跳转链接
                linkUrl: function (url) {
                    var _this = this;
                    if (url.indexOf('?') >= 0) {
                        url = url + '&channelId=' + _this.model.channelId;
                    } else {
                        url = url + '?channelId=' + _this.model.channelId;
                    }
                    window.location.href = url;
                },
                //返回上一页
                resetForm() {
                    window.history.back(-1);
                },
                //关闭弹窗及重置字段
                resetField() {
                    console.log('关闭事件')
                    this.dialogFieldIndex = -1
                    this.$refs['fieldForm'].resetFields();
                },
                //选择上级父类
                handleChange(value) {
                    let _this = this;
                    _this.$refs.listCascader.dropDownVisible = false; //监听值发生变化就关闭它
                },

            },
            created: function () {
                //初始化数据
                this.initData();
            }
        })
    </script>
</body>
</html>
